import React, { useEffect, useState } from 'react'
import './studentStatus.less'
import { useContext } from 'react'
import { Context } from '@/App'
import { reqStuStatus } from '@/api/api'
import { message, Spin } from 'antd'
import { useNavigate } from 'react-router-dom'
import { newBirthdayToStuStatus } from '@/tool/birthdayToStuStatus'

import StudentStatusTable from '@/components/StudentStatus/StudentStatusTable'

export default function StudentStatus() {
  const [stuStatus, setStuStatus] = useState()
  const [loading, setLoading] = useState(true)

  const { role } = useContext(Context)
  const navigate = useNavigate()

  const getStudentInfor = (role) => {
    setLoading(true)
    reqStuStatus(role).then(
      res => {
        if (res.status === 200) {
          setLoading(false)
          setStuStatus(newBirthdayToStuStatus(res.data))
        }
        if (res.status === 201) {
          message.error("没有查找到你的信息")
          navigate('/login', { replace: true })
        }
      },
      rej => { }
    )
  }

  useEffect(() => {
    if (role !== null) {
      getStudentInfor(role)
    }
  }, [role])

  return (
    <div>
      {
        loading ?
          <Spin size='large' className='loading' /> :
          <StudentStatusTable stuStatus={stuStatus} />
      }
    </div>
  )
}
